
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.walletA {
  background-image: linear-gradient(90deg, #75aaff, #2571ff);
  box-shadow: 0 0 10px #cedfff;
}
.walletB {
  background-image: linear-gradient(90deg, #ff6d6f, #ff3535);
  box-shadow: 0 0 10px #ffdbdb;
}
.walletC {
  background-image: linear-gradient(90deg, #3edfff, #00bg-white);
  box-shadow: 0 0 10px #cef7ff;
}
.walletD {
  background-image: linear-gradient(90deg, #ffd64f, #ffc42d);
  box-shadow: 0 0 10px #fff2c6;
}
.walletE {
  background-image: linear-gradient(90deg, #42dfdf, #00adad);
  box-shadow: 0 0 10px #afffff;
}
.walletF {
  background-image: linear-gradient(90deg, #a86fe0, #8851be);
  box-shadow: 0 0 10px #e4c9ff;
}
.telcard {
  background: #fff;
  background-image: -webkit-linear-gradient(0deg, #324968, #6e5968);
  color: #fff;
}
</style>
<template>
  <div class="h100 f f-col bg-white">
    <div style="height:3rem;min-height:3rem;" class="f j-a a-c b1 center cfff telcard">
      <div @click="$link('./walletX')">
        <p class="f a-c t-c">
          <span>余额(元)</span>
        </p>
        <h1 class="mt10 f30">{{datas.settledAmount}}</h1>
      </div>
      <div @click="$link('./bankcard')">
        <p class="f a-c t-c">银行卡(张)
        </p>
        <h1 class="mt10 f30">{{datas.balance}}</h1>
      </div>
    </div>
    <div class="pt20 pb20 mt15 pl5 pr5 bg-white">
      <div class="f j-a">
        <div class="center" @click="$link('./walletX')">
          <div class="walletE round50 auto f j-c a-c" style="width:1.2rem;height:1.2rem;">
            <van-icon color="#fff" size="0.6rem" name="bill"/>
          </div>
          <p class="mt10 t2">提现</p>
        </div>
        <div class="center">
          <div class="walletF round50 auto f j-c a-c" style="width:1.2rem;height:1.2rem;">
            <van-icon color="#fff" size="0.6rem" name="coupon"/>
          </div>
          <p class="center mt10 t2">充值</p>
        </div>
        <div class="center" @click="$link('./bankcard')">
          <div class="walletA round50 auto f j-c a-c" style="width:1.2rem;height:1.2rem;">
            <van-icon color="#fff" size="0.6rem" name="card"/>
          </div>
          <p class="mt10 t2">银行卡</p>
        </div>
      </div>
      <div class="f j-a mt20">
        <div class="center">
          <div class="walletB round50 auto f j-c a-c" style="width:1.2rem;height:1.2rem;">
            <van-icon color="#fff" size="0.6rem" name="balance-list"/>
          </div>
          <p class="mt10 t2">交易明细</p>
        </div>
        <div class="center">
          <div class="walletD round50 auto f j-c a-c" style="width:1.2rem;height:1.2rem;">
            <van-icon color="#fff" size="0.6rem" name="service"/>
          </div>
          <p class="mt10 t2">帮助中心</p>
        </div>
        <div class="center">
          <div class="round50 auto f j-c a-c" style="width:1.2rem;height:1.2rem;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { accountInquiry } from "@/http/api";
export default {
  data() {
    return {
      datas:{}
    };
  },
  created(){
    this.getAccountInquiry()
  },
  methods: {
    getAccountInquiry(){
      accountInquiry().then((res)=>{
        if(res.code === 200){
          this.datas = res.result
        }
      })
    }
  }
};
</script>

